<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="./css/common.css">
    <script src="./js/flexible.js"></script>
    <title>注册方式</title>
  </head>
  <body>
    <div id="cover">
      <img src="images/open_tips.png">
    </div>
    <div id="app">
      <div class="my-body">
        <div class="my-content">
          <div class="content-before">
            <div class="before-icon icon">
              <img src="images/logo.png">
            </div>
            &nbsp;&nbsp;&nbsp;吃喝玩乐SAO一下
          </div>
          <div class="header-icon icon">
            <img id="friend" src="images/logo.png">
          </div>
          <div class="content-tips tips-text">
          </div>
          <div class="channel-list">
            <div class="channel-item color-info">
              <span id="area">
                +86
              </span>
              <input id="phone" type="number" placeholder="输入手机号领取奖励" />
            </div>
            <div class="channel-item color-info">
              <input id="code" type="number" placeholder="输入验证码" />
              <span id="time-out">
                获取验证码
              </span>
            </div>
            <button id="activation" class="channel-item color-primary">激活奖励</button>
            <!-- <div class="channel-item color-primary">Facebook</div> -->
            <!-- <div class="channel-item color-success">微信注册领取</div> -->
          </div>
          <div class="agree">
          	提交即同意<a href="./register_agreement.html">《注册协议》</a>
          </div>
        </div>
      </div>
      <div class="my-footer">
        <div>
          <div class="quotes quotes-up">“</div>
          每条攻略都来自达人的亲身体验
          <div><p class="quotes quotes-down">”</p></div>
        </div>
        <div class="header-show icon">
          <img src="images/ceo.png">
        </div>
        <div>
          金牛未来CEO
        </div>
      </div>
      <div class="sheet-cover">
        
      </div>
      <div id="action-sheet">
        <div class="sheet-item sheet-title"> 选择手机归属地 </div>
        <div class="sheet-item area-code" value='86'>中国+86</div>
        <div class="sheet-item area-code" value='84'>越南+84</div>
      </div>
    </div>
  </body>
  <style type="text/css">
    /* 1rem = 75px */
    .my-body {
      padding-top: 2rem;
    }
    @media screen and (max-height: 568px) {
      .my-body {
        padding-top: 1rem;
      }
    }
    @media screen and (max-height: 320px) {
      .my-footer {
        position: static;
      }
    }
    @media screen and (min-height: 321px) {
      .my-footer {
        position: absolute;
      }
    }
    #action-sheet {
      position: fixed;
      bottom: -150px;
      width: 100%;
      background: #fff;
      z-index: 3;
    }
    .sheet-cover {
      width: 100%;
      height: 100%;
      background: rgba(76, 76, 76, .5);
      position: absolute;
      top: 0;
      z-index: 2;
      display: none;
    }
    #action-sheet > .sheet-item{
      font-size: 0.4rem;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #F3F3F3;
    }
    #action-sheet > .sheet-title{
      font-size: 0.48rem;
    }
      
    .my-content {
      margin: 0 auto;
      width: 8.4rem;
      background: #FFFFFF;
      box-shadow: 0rem -0.05rem 0.91rem 0rem rgba(4, 28, 103, 0.12);
      border-radius: 0.32rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .my-content>.content-before {
      margin-left: 0.573333rem;
      margin-top: 0.413333rem;
      display: flex;
      width: 100%;
      align-items: center;
    }

    .my-content>.content-before .before-icon {
      width: 0.64rem;
      height: 0.64rem;
    }

    .my-content>.header-icon {
      height: 1.866666rem;
      width: 1.866666rem;
      margin-top: 0.453333rem;
      border-radius: 50%;
    }
    .tips-text {
      display: none;
    }
    
    .quotes {
      font-size:1rem;
      font-weight:400;
      color:rgba(53,59,80,1);
      line-height:50px;
      letter-spacing:1px;
      position: relative;
    }
    .quotes-up {
      top: -10px;
    }
    .quotes-down {
      bottom: -10px;
    }
    .channel-list {
      width: 100%;
      margin-top: 0.213333rem;
    }

    .channel-list,
    input {
      border-width: 0;
      background-color: transparent;
    }

    .channel-list>.channel-item {
      margin: 0 auto;
      font-size: 0.4rem;
      width: 7.6rem;
      height: 1.066666rem;
      line-height: 1.066666rem;
      border-radius: 0.666666rem;
      margin-bottom: 0.52rem;
      position: relative;
    }

    .channel-list>.channel-item>#area {
      left: 0.4rem;
      position: absolute;
    }

    .channel-list>.channel-item>#time-out {
      right: 0.2rem;
      position: absolute;
    }

    .channel-list>.channel-item>span {
      color: #333333;
    }

    .my-content>.content-tips {
      font-size: 0.266666rem;
      margin-top: 0.226666rem;
      width: 70%;
    }

    .my-content>.agree {
      margin-bottom: 0.52rem;
      width: 90%;
      text-align: left;
      color: #7F7F7F;
    }

    .my-footer {
      margin-top: 0.853333rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .my-footer>.header-show {
      width: 1.373333rem;
      height: 1.373333rem
    }

    .my-footer>div:nth-child(1) {
      display: flex;
      font-size: 0.48rem;
    }

    .my-footer>div:nth-child(3) {
      margin-top: 0.16rem;
      font-size: 0.32rem;
    }

    #cover {
      width: 100%;
      height: 100%;
      background: rgba(76, 76, 76, 1);
      position: absolute;
      z-index: 2;
      display: none;
    }

    #cover>img {
      width: 100%;
    }
  </style>
  <script src="./js/jquery.js" type="text/javascript" charset="utf-8"></script>
  <script src="./plug/layer_mobile/layer.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
  <script> new VConsole(); </script>
  <script type="text/javascript">
    $(document).ready(function() {
      // 强制设置body高度 防止弹出键盘影响布局
      var windowsHeight = window.innerHeight
      console.log(windowsHeight)
      $('body').height(`${windowsHeight}px`) 
      // if (windowsHeight <= 553 ) {
      //   $(".my-body").css("padding-top","1rem")
      // }
      // window.addEventListener('resize', function () {
      //     if(window.innerHeight < windowsHeight){
      //         $('.my-footer').hide();
      //     }else{
      //         $('.my-footer').show();
      //     }
      // });
      const urlParams = new URL(window.location.href);
      var ua = window.navigator.userAgent.toLowerCase(),
        invite_code = urlParams.searchParams.get("invite_code"),
        phone,
        code,
        mobile_area_code = 86,
        timeIndex = 60,
        url = 'https://192.168.1.200:8901/user_service'
        // 初始化页面
      function init() {
        // 判断是否有过发送验证码记录
        const oldTimes = window.sessionStorage.getItem('timestamp') || 0
        const nowTimes = parseInt(new Date().getTime() / 1000)
        const diffTimes = nowTimes - oldTimes
        console.log(diffTimes)
        if (diffTimes < 60) {
          $("#time-out").text(60 - diffTimes + 1 + 'S')
          interval( 60 - diffTimes)
        }
        getUserInfo()
      }
      // 获取邀请人信息
      function getUserInfo() {
        $.ajax({
            type: "GET",
            url: url + '/user',
            contentType: "application/x-www-form-urlencoded",
            headers:{
                Lang:'zh-CN',
                Currency: 'rmb',
                Version: 100
            },
            data: {
              invite_code
            },
            success: function (data) {
               if (data.code === 100200) {
                 console.log(data)
                 $(".tips-text").text(`您的好友${data.data.user.nickname}邀请您体验SAO APP 即刻下在享好礼`)
                 $(".tips-text").show()
                 $("#friend").attr("src",`${data.data.user.avatar_url}`)
               } else {
                 layer.open({
                   content: data.msg,
                   skin: 'msg',
                   time: 2
                 });
               }
            }
        });
      }
      // 检查是否在微信浏览器
      function isWeiXin() {
        const ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
          return true;
        } else {
          return false;
        }
      }
      // 下载
      function downloadApp() {
        if (isWeiXin()) {
          $("#cover").fadeIn();
          return false;
        }
      }
      // 激活奖励
      $("#activation").click(() => {
        code = $("#code").val()
        if (!code) {
          layer.open({
            content: '验证码格式不正确',
            skin: 'msg',
            time: 2
          });
          return false;
        }
        // 发送注册请求
         $.ajax({
            type: "POST",
            url: url + '/mobile_login',
            data:{
                phone,
                code,
                invite_code
            },
            contentType: "application/x-www-form-urlencoded",
            headers:{
                Lang:'zh-CN',
                Currency: 'rmb',
                Version: 100
            },
            success: function (data) {
               if (data.code === 100200) {
                  downloadApp()
               } else {
                 layer.open({
                   content: data.msg,
                   skin: 'msg',
                   time: 2
                 });
               }
            }
        });
      });
      // 区号选择
      $("#area").click(() => {
        //  获取所有地区节点渲染选中
        const nodes = $(".area-code").each(function() {
          if ($(this).attr("value") == mobile_area_code) {
            $(this).css("color","#FDC33E")
          } else {
            $(this).css("color","#333333")
          }
        })
        $("#action-sheet").animate({bottom:0})
        $(".sheet-cover").show()
      });
      function hideSheet() {
        $("#action-sheet").animate({bottom:'-150px'})
        $(".sheet-cover").hide()
      }
      $(".sheet-cover").click(hideSheet)
      $(".area-code").click(function() {
        hideSheet()
        mobile_area_code = $(this).attr("value")
        $("#area").text(`+${mobile_area_code}`)
        
      })
      // 发送验证码
      $("#time-out").click(() => {
        phone = $("#phone").val()
        if(!(/^1[3456789]\d{9}$/.test(phone))){ 
          layer.open({
            content: '手机号码格式不正确',
            skin: 'msg',
            time: 2
          });
          return false; 
        }
        if (timeIndex > 0 && timeIndex < 60) {
          return false;
        }
        $.ajax({
            type: "GET",
            url: url + '/sms',
            data:{
              mobile:phone,
              type:"1",
              mobile_area_code
            },
            contentType: "application/x-www-form-urlencoded",
            headers:{
                Lang:'zh-CN',
                Currency: 'rmb',
                Version: 100
            },
            success: function (data) {
               if (data.code === 100200) {
                  layer.open({
                    content: '验证码发送成功',
                    skin: 'msg',
                    time: 2
                  });
                  window.sessionStorage.setItem('timestamp', parseInt(new Date().getTime()/1000))
                  interval(60)
               } else {
                 layer.open({
                   content: data.msg,
                   skin: 'msg',
                   time: 2
                 });
               }
            }
        });
      })
      // 验证码定时器
      function interval(begin) {
        timeIndex = begin
        var times = setInterval(() => {
          $("#time-out").text(`${timeIndex}S`)
          if (timeIndex <= 0) {
            $("#time-out").text('重新获取')
            clearInterval(times)
          };
          timeIndex--
        }, 1000)
      }
      init()
    })
  </script>
</html>
